<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <link type="text/css" rel="stylesheet" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/animate.css}"/>

</head>
<body>
<!--导航部分  begin-->
<div th:replace="common/header::header"></div>
<!--导航部分 end-->

<!--最顶端轮播图片 begin-->
<div th:replace="common/carousel::carousel"></div>
<!--最顶端轮播图片 end-->

<div class="container">
    <ol class="breadcrumb">
        <li><a href="#">图书列表</a></li>
        <li><a href="#">精选图书</a></li>
    </ol>
</div>

<!--图书列表-->
<!--加载数据-->
<div id="bookList"></div>

<!--底部信息-->
<div th:replace="common/footer::footer"></div>

<!--登录注册模态框-->
<div th:replace="common/login_register::login_register"></div>
<!--end-->
<script th:src="@{/dist/js/jquery.min.js}"></script>
<script th:src="@{/js/carousel.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/dist/js/bootstrap.min.js}"></script>
<script th:src="@{/js/wow.js}"></script>
<script th:src="@{/js/login_register.js}"></script>
<script th:inline="javascript">
    //获取应用路径
    var contextPath = [[${#request.getContextPath()}]];
    var category = [[${category}]];
</script>
<script type="text/javascript">
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
    }
    ;

    // 加载图书列表
    $(function () {
        $("#bookList").load(contextPath + "/book/getBookListData", queryData(1, '', category))
    })


    // 封装参数
    function queryData(page, pageSize, category) {
        var query = {};
        query.page = page;
        query.pageSize = pageSize == '' ? 4 : pageSize;
        query.category = category;
        return query;
    }

    // 分页加载数据
    function loadData(page, pageSize, category) {
        $("#bookList").load(contextPath + "/book/getBookListData", queryData(page, pageSize, category))
    }

    //跳转到指定的页面
    function goToPage(pageSize, category) {
        var page = $("#inputPage").val();
        $("#bookList").load(contextPath + "/book/getBookListData", queryData(page, pageSize, category))
    }

    //修改指定每页显示的记录数
    function loadDataBySize(obj) {
        $("#bookList").load(contextPath + "/book/getBookListData", queryData(1, obj.value, category))
    }
</script>
</body>
</html>
